<%@ page import="java.io.*,java.util.*" language="java"
	contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>

<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<jsp:useBean id="obstacles" scope="session"
	class="com.cmpe.av.addReport" />
<%
	if (session.getAttribute("userName") == null) {
		//response.sendRedirect("http://localhost:5596/cmpe451Web/");
		response.sendRedirect("default.jsp");

	} else {
%>

<html>
<link href="css/style.css" rel="stylesheet" type="text/css" />

<form name="dummy" action="addReport" method="post"
	ENCTYPE="multipart/form-data">
	<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html {
	height: 100%
}

body {
	height: 100%;
	margin: 0;
	padding: 0
}

#map_canvas {
	height: 100%
}
</style>
<script type="text/javascript"
	src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDrrgNfqrX8_ifFLZsrvnBqE4Ne6KCpRhU&sensor=true&libraries=places">
	
</script>
<script type="text/javascript"
	src="http://code.jquery.com/jquery-1.8.2.min.js ">
	
</script>
<script type="text/javascript"
	src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js">
	
</script>
<script type="text/javascript"
	src="http://code.jquery.com/ui/1.8.24/jquery-ui.min.js ">
	
</script>
<script
	src="http://xoxco.com/projects/code/tagsinput/jquery.tagsinput.js "></script>
<link rel="stylesheet"
	href="http://xoxco.com/projects/code/tagsinput/jquery.tagsinput.css ">
<script type="text/javascript">
	function initialize() {
		var mapOptions = {
			center : new google.maps.LatLng(41.085266364561456,
					29.046590751647955),
			zoom : 16,
			mapTypeId : google.maps.MapTypeId.ROADMAP
		};
		var map = new google.maps.Map(document.getElementById("map_canvas"),
				mapOptions);
		google.maps.event.addListener(map, 'click', function(event) {
			placeMarker(event.latLng);
			document.getElementById("locationFieldLat").value = event.latLng
					.lat();
			document.getElementById("locationFieldLong").value = event.latLng
					.lng();
		});
		var input = document.getElementById('searchTextField');
		var autocomplete = new google.maps.places.Autocomplete(input);

		autocomplete.bindTo('bounds', map);

		var infowindow = new google.maps.InfoWindow();
		var marker1 = new google.maps.Marker({
			map : map
		});

		google.maps.event
				.addListener(
						autocomplete,
						'place_changed',
						function() {
							infowindow.close();
							marker1.setVisible(false);
							input.className = '';
							var place = autocomplete.getPlace();
							set_location(place);
							if (!place.geometry) {
								// Inform the user that the place was not found and return.
								input.className = 'notfound';
								return;
							}

							// If the place has a geometry, then present it on a map.
							if (place.geometry.viewport) {
								map.fitBounds(place.geometry.viewport);
							} else {
								map.setCenter(place.geometry.location);
								map.setZoom(17);
							}
							var image = new google.maps.MarkerImage(place.icon,
									new google.maps.Size(71, 71),
									new google.maps.Point(0, 0),
									new google.maps.Point(17, 34),
									new google.maps.Size(35, 35));
							marker1.setIcon(image);
							marker1.setPosition(place.geometry.location);

							var address = '';
							if (place.address_components) {
								address = [
										(place.address_components[0]
												&& place.address_components[0].short_name || ''),
										(place.address_components[1]
												&& place.address_components[1].short_name || ''),
										(place.address_components[2]
												&& place.address_components[2].short_name || '') ]
										.join(' ');
							}

							infowindow.setContent('<div><strong>' + place.name
									+ '</strong><br>' + address);
							infowindow.open(map, marker1);
						});

		function set_location(place) {

			document.getElementById("locationFieldLat").value = place.geometry.location
					.lat();
			document.getElementById("locationFieldLong").value = place.geometry.location
					.lng();

		}

		google.maps.event.addDomListener(window, 'load', initialize);

		var marker;

		function placeMarker(location) {

			if (marker) {
				marker.setPosition(location);
			} else {
				marker = new google.maps.Marker({
					position : location,
					map : map,
					draggable : true
				});
				var infowindow = new google.maps.InfoWindow({
					content : 'name of report'

				});
				google.maps.event.addListener(marker, 'click', function() {
					infowindow.open(map, marker);
				});

			}
		}
	}
</script>
<script type="text/javascript">
	function handleEnter(field, event) {
		var keyCode = event.keyCode ? event.keyCode : event.which ? event.which
				: event.charCode;
		if (keyCode == 13) {
			var i;
			for (i = 0; i < field.form.elements.length; i++)
				if (field == field.form.elements[i])
					break;
			i = (i + 1) % field.form.elements.length;
			field.form.elements[i].focus();
			return false;
		} else
			return true;
	}
</script>
<script>
	$(function() {
		$('#tags').tagsInput();
	});
</script>
<style type="text/css">
p {
	color: crimson;
}

textarea[name=reportDescription] {
	resize: vertical;
	max-height: 300px;
}
</style>
<link href="css/style.css" rel="stylesheet" type="text/css" />
	</head>
	<body onload="initialize()" background="images/background.jpg">

		<div class="header">
			<div class="wrapper">
				<div class="logo">
					<img src="images/banner.jpg" alt="" />
				</div>

				
			</div>
		</div>

		<div class="wrapper">

			<div class="leftmenu">
				<ul>
					
					<li><a href="default.jsp">Home Page</a></li>
            		<li><a href="homeMember.jsp">Profile Page</a></li>
					<li><a href="addReport.jsp">Add Report</a></li>
					<li><a href="searchPage.jsp">Search For a Report</a></li>
					
				</ul>
			</div>
			<div class="centercol">

				<h3>Add Report</h3>
				<label>Add a report for violation that you encountered!</label>
				<br><br>
				<div class="report-list add-report">
					<div class="report-list-item">
						<table>
							<tr align="left" valign="middle">
								<td width="200" class="col1">Report Name</td>
								<td width="10">:</td>
								<td width="300" class="col2"><input class="rp" type="text"
									name="reportName" placeholder="Type Here" required="required" /></td>
							</tr>
							<tr align="left" valign="middle">
								<td width="130" class="col1">Tags</td>
								<td width="10">:</td>
								<td width="300" class="col2"><input type="text" name="tags"
									id="tags" class="tags" style="display: none;" /></td>
							</tr>
							<tr align="left" valign="middle">
								<td width="130" class="col1">Violation Type</td>
								<td width="10">:</td>
								<td width="300" class="col2"><select name="obstacleType">
										<c:forEach var="ob" items="${obstacles.obstacles}">
											<option value="${ob.getObstacleID()}">
												<c:out value="${ob.getObstacleName()}" />
											</option>
										</c:forEach>
								</select></td>
							</tr>
							<tr align="left" valign="middle">
								<td width="130" class="col1">Status</td>
								<td width="10">:</td>
								<td width="300" class="col2"><select name="status">
										<option selected value="Detected">Detected</option>
										<option value="InProgress">In Progress</option>
										<option value="FriendlyLocation">Friendly Location</option>
								</select></td>
							</tr>
							<tr valign="top">
								<td class="col1" width="130">Description</td>
								<td width="10">:</td>
								<td width="300" class="col2"><textarea
										name="reportDescription" id="reportDescription"
										placeholder="Type Here" rows="3" cols="5"></textarea></td>
							</tr>

							<tr align="left" valign="middle">
								<td width="130" class="col1">Add Image</td>
								<td width="10">:</td>
								<td width="300" class="col2"><input type="file"
									name="image" value="image" /></td>
							</tr>
							 
							 <tr align="left" valign="middle">
								<td width="130" class="col1">Add Video</td>
								<td width="10">:</td>
								<td width="300" class="col2"><input type="file"
									name="video" value="video" /></td>
							</tr>
							<tr align="left" valign="middle">
								<td width="130" class="col1">Add Audio</td>
								<td width="10">:</td>
								<td width="300" class="col2"><input type="file"
									name="audio" value="audio" /></td>
							</tr>
							<tr>
						
								<td></td>
								
						<td></td>
						<td><input  class="btn-middle" type="submit" name="button" value="Add Report" /></td>
							</tr>
						</table>
					</div>
				</div>

			</div>

			<div class="rightcol subscribed maps">

				<h3>Type Location</h3>
				<label>You should definitely pick a location on the map. </label>
				
				<table>
				<tr><c:if test="${invalid == true}">
						
							<p>
								<b>Location must be selected.</b>
							</p>
						
					</c:if></tr>
					<tr>
						<input id="searchTextField" type="text"
							onkeypress="return handleEnter(this, event)" size="100" autofocus>
					</tr>
					<br><br>
					<tr>
					
					</tr>
					<tr>
						<div id="map_canvas" style="width: 420px; height: 500px"></div>
					</tr>
					

					<tr>
						<td><input type="hidden" id="locationFieldLat"
							name="locationFieldLat" /></td>
					</tr>
					<tr>
						<td><input type="hidden" id="locationFieldLong"
							name="locationFieldLong" /></td>
					</tr>
					<tr>
				</table>
			</div>
	</body>
</form>
</html>
<%}%>